<template>
  <div id="app">
    <h1>app</h1>
    <!--  <ul>
      <li v-for="(item, index) in list" :key="index">
        <p>
          <span>{{ item.name }}</span
          ><span>{{ item.age }}</span>
        </p>
      </li>
    </ul> -->
    <!-- 子组件的组件标签 -->
    <son>
      <ul>
        <li v-for="(item, index) in list" :key="index">
          <p>
            <span>{{ item.name }}</span
            ><span>{{ item.age }}</span>
          </p>
        </li>
      </ul>
      <div>{{ msg }}</div>
      <hr />
      <ul slot="list">
        <li v-for="(item, index) in list" :key="index">
          <p>
            <span>{{ item.name }}</span
            ><span>{{ item.age }}</span>
          </p>
        </li>
      </ul>
      <div slot="yangyang">{{ msg }}</div>
    </son>
    <brother>
      <template slot="erSon" slot-scope="scoped">
        <h1>{{ scoped.liwu }}</h1>
        <h1>{{ scoped }}</h1>
      </template>
    </brother>
  </div>
</template>

<script>
import Son from "./components/Son.vue";
import Brother from "./components/Brother.vue";
/* 
slot（插槽） 通信方式是可以传递数据 标签
在父组件中调用，内容写到子组件的标签内部，在子组件当中写 <slot></slot>即可显示内容
无名插槽   父传子
具名插槽   给插槽起名字  父传子
作用域插槽

*/
export default {
  name: "App",
  data() {
    return {
      list: [
        {
          name: "yangyang",
          age: 18,
        },
        {
          name: "石松峰",
          age: 18,
        },
        {
          name: "硕硕",
          age: 17,
        },
      ],
      msg: "我们都爱洋洋",
    };
  },
  components: {
    Son,
    Brother,
  },

  Sonmethods: {},
};
</script>

<style lang="scss" scoped>
</style>
